<!DOCTYPE html>
<html>

<head>
  <title>技术文章</title>
  <% include layout/lib.ejs %>
  <link rel="stylesheet" type="text/css" href="/css/technologyArticle.css" />
</head>

<body>
  <% include layout/header.ejs %>

  <div class="technologyArticleBox">
    <div class="technologyArticleMain">
      <div class="technologyArticleContent">
        <div class="technologyArticleContentTitle">
          热门
          <div class="allBtn">全部</div>
          <input type="text" placeholder="输入完成，按回车进行筛选" id="articleTitleChange" />
          
        </div>
        
        <% for(var i=0;i<listData.length;i++){ %>
        <div class="technologyArticleContentItem">
          <div class="technologyArticleContentItemLeft" style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"><i class="fa fa-link fa-lg"></i> <b
              style="color:#87a9df;"><%= listData[i].a_tag %></b> - <a href="/technologyArticleDetail?a_id=<%= listData[i].a_id %>"><%= listData[i].a_title %></a></div>
          <div class="technologyArticleContentItemRight">
            <div class="technologyArticleContentItemCount">
              <div style="width:70px;float:right;">
              <i class="fa fa-eye fa-lg" style="position:relative;right:0px;"></i><span><%= listData[i].a_read_count %></span>
            </div>
              <div style="width:100px;float:right;">
              <i class="fa fa-calendar fa-lg"></i><span><%= common.dateFormat("yyyy-MM-dd",listData[i].a_create_time) %></span>
            </div>
            
            </div>
          </div>
        </div>
        <% } %>

      </div>
      <div class="technologyArticleMenu">
        <div class="technologyArticleMenuTitle">技术标签</div>
        <div class="technologyArticleTagBox">
          <% for(var i=0;i<tagData.length;i++){ %>
            <div class="technologyArticleTagItem"><%= tagData[i].a_tag %></div>
          <% } %>
        </div>
      </div>
    </div>
  </div>

  <% include layout/footer.ejs %>
</body>
<script>
  $(function(){

      $("#articleTitleChange").change(function(){
      var filter = $(this).val();
      if(filter) {
        $matches = $(".technologyArticleContent").find('.technologyArticleContentItem:Contains(' + filter + ')');
        $('.technologyArticleContentItem', $(".technologyArticleContent")).not($matches).hide();
        $matches.show();
      }else{
        $('.technologyArticleContentItem').show();
      }
      
      })

      $(".allBtn").click(function(){
        $("#articleTitleChange").val("");
        $(".technologyArticleContent").find('.technologyArticleContentItem').show();
      })
  })



</script>
</html>